// src/components/ContentDistribution/PublishedContentView.jsx
import React, { useState } from 'react';
import { Card, Tabs, List, Button, Badge, Tag } from 'antd';
import {
  BarChartOutlined, TableOutlined, DashboardOutlined,
  DownloadOutlined, ShareAltOutlined
} from '@ant-design/icons';

const { TabPane } = Tabs;

const PublishedContentView = () => {
  const [activeTab, setActiveTab] = useState('reports');

  // 模拟发布给当前用户的内容
  const publishedContent = [
    {
      id: '1',
      title: '2023年Q3销售报告',
      type: 'report',
      description: '包含第三季度所有销售数据和分析',
      publisher: '销售总监',
      publishedAt: '2023-11-15 15:30',
      accessCount: 24,
      status: 'new',
    },
    {
      id: '2',
      title: '客户地域分布分析',
      type: 'dashboard',
      description: '按地域划分的客户分布热力图',
      publisher: '市场部',
      publishedAt: '2023-11-14 10:15',
      accessCount: 42,
      status: 'viewed',
    },
    {
      id: '3',
      title: '财务季度汇总',
      type: 'table',
      description: 'Q3财务数据汇总表',
      publisher: '财务部',
      publishedAt: '2023-11-13 14:20',
      accessCount: 18,
      status: 'viewed',
    },
    {
      id: '4',
      title: '产品库存分析',
      type: 'report',
      description: '各仓库产品库存及周转率分析',
      publisher: '运营总监',
      publishedAt: '2023-11-12 16:45',
      accessCount: 31,
      status: 'viewed',
    }
  ];

  const renderContentIcon = (type) => {
    switch (type) {
      case 'report':
        return <BarChartOutlined style={{ fontSize: 24 }} />;
      case 'dashboard':
        return <DashboardOutlined style={{ fontSize: 24 }} />;
      case 'table':
        return <TableOutlined style={{ fontSize: 24 }} />;
      default:
        return <BarChartOutlined style={{ fontSize: 24 }} />;
    }
  };

  const renderStatusBadge = (status) => {
    if (status === 'new') {
      return <Badge status="processing" text="新内容" />;
    }
    return <Tag color="default">已查看</Tag>;
  };

  return (
    <Card title="已发布内容">
      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="报表" key="reports" />
        <TabPane tab="仪表盘" key="dashboards" />
        <TabPane tab="数据表" key="tables" />
        <TabPane tab="全部" key="all" />
      </Tabs>

      <List
        itemLayout="horizontal"
        dataSource={publishedContent.filter(item =>
          activeTab === 'all' || item.type === activeTab
        )}
        renderItem={(item) => (
          <List.Item
            actions={[
              <Button type="primary" icon={<DownloadOutlined />}>下载</Button>,
              <Button icon={<ShareAltOutlined />}>分享</Button>,
              <Button>查看详情</Button>
            ]}
          >
            <List.Item.Meta
              avatar={renderContentIcon(item.type)}
              title={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ marginRight: 8 }}>{item.title}</span>
                  {renderStatusBadge(item.status)}
                </div>
              }
              description={
                <div>
                  <div>{item.description}</div>
                  <div style={{ marginTop: 8, color: '#8c8c8c' }}>
                    <span>发布者: {item.publisher}</span>
                    <span style={{ marginLeft: 16 }}>发布时间: {item.publishedAt}</span>
                    <span style={{ marginLeft: 16 }}>访问次数: {item.accessCount}</span>
                  </div>
                </div>
              }
            />
          </List.Item>
        )}
      />
    </Card>
  );
};

export default PublishedContentView;
